<template>
	<view class="img-group" :style="{ padding: modelData.paddingTB * 2 + 'rpx 0' }">
		<view class="type-one" v-if="imgList.length === 1">
			<u-image
				class="one-img"
				width="100%"
				:border-radius="border_radius"
				:height="height"
				:src="imgList[0].img"
				@click="goPage(imgList[0].url, imgList[0].switchTab)"
			></u-image>
		</view>
		<view class="type-two" v-if="imgList.length === 2">
			<u-image
				v-for="(item, index) in imgList"
				:key="index"
				class="two-img"
				:border-radius="border_radius"
				:height="two_height"
				:src="item.img"
				@click="goPage(item.url, item.switchTab)"
			></u-image>
		</view>
		<view class="type-three" v-if="imgList.length === 3">
			<u-image
				v-for="(item, index) in imgList"
				:key="index"
				class="three-img"
				:border-radius="border_radius"
				:height="three_height"
				:src="item.img"
				@click="goPage(item.url, item.switchTab)"
			></u-image>
		</view>
		<view class="type-four" v-if="imgList.length === 4">
			<u-image
				v-for="(item, index) in imgList"
				:key="index"
				class="four-img"
				:border-radius="border_radius"
				:height="four_height"
				:src="item.img"
				@click="goPage(item.url, item.switchTab)"
			></u-image>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		modelData: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	computed: {
		imgList() {
			return this.modelData.imagesList.map(item => {
				return {
					img: item.image.url,
					switchTab: item.switchTab,
					url: item.url
				};
			});
		}
	},
	data() {
		return {
			type: 1,
			height: '246rpx',
			two_height: '218rpx',
			three_height: '227rpx',
			four_height: '170rpx',
			border_radius: '12rpx'
		};
	}
};
</script>

<style lang="scss" scoped>
.img-group {
	width: 706upx;
	margin: 0 auto;
	.type-one {
		// padding: 0 4rpx;
	}
	.type-two {
		display: flex;
		flex-wrap: wrap;
		.two-img {
			width: calc(50% - 16rpx);
			margin-bottom: 8upx;
			padding: 0 4rpx;
		}
	}
	.type-three {
		display: flex;
		flex-wrap: wrap;
		.three-img {
			width: calc(33.33333% - 8rpx);
			padding: 0 4rpx;
		}
	}
	.type-four {
		display: flex;
		flex-wrap: wrap;
		.four-img {
			width: calc(25% - 8rpx);
			padding: 0 4rpx;
		}
	}
}
</style>
